import React from 'react';
import {connect} from 'dva';
import {Link} from 'dva/router';

import styles from './IndexPage.css';
import PictureBox from "../components/pic/PictureBox";
import PoetryItem from "../components/poetry/PoetryItem";
import TextInfo from "../components/poetry/TextInfo";
import SubscribeBtn from "../components/poetry/SubscribeBtn";
import SimpleToast from "../components/toast/SimpleToast";
import getThemeColor from "../utils/themeutil";
import FloatBtn from "../components/pic/FloatBtn";
import FaSearch from 'react-icons/lib/fa/search';

function IndexPage({dispatch, index, count}) {

  function subscribeService(payload) {
    dispatch({
      type: 'index/subscribe',
      payload: payload
    });
  }

  function hideToast() {
    dispatch({
      type: 'index/hideToast'
    })
  }

  function getPoetryItem(app, ct) {
    return (<PoetryItem
      title={app.title}
      content={app.content}
      author={app.author}
      pic={app.pic}
      poetryId={app.id}
      dynasty={app.dynasty}
      key={'index_list_' + ct}
    />);
  }

  const {poetryList, face, subscribeStatus, subscribeMsg} = index;
  const {accessCount} = count;

  let tmpCount = 0;
  return (
    <div className={styles.container}>
      <PictureBox src={face[1]} toTop={true}/>
      <TextInfo info={'中华诗选'} sub={'每日精选12首精美古诗'} styles={{
        fontSize: '1.4em',
      }}/>
      {
        poetryList.map(a => getPoetryItem(a, ++tmpCount))
      }

      <TextInfo sub={'古诗选 | Zweb+ © 2017~2018 | YiHui | 本站总访问: ' + accessCount.total} subStyles={{
        textAlign: 'center',
      }}/>

      <SubscribeBtn submit={subscribeService} subStatus={subscribeStatus}/>


      <Link to={'/search'}>
        <FloatBtn
          children={<FaSearch/>}
          btnStyle={{
            position: 'fixed',
            bottom: '1em',
            left: '6em',
            backgroundColor: getThemeColor(),
            fontSize: '.9em',
            padding: '.1em .1em .1em .2em',
          }}/>
      </Link>

      {
        subscribeStatus !== -1 ?
          <SimpleToast info={subscribeMsg} cancel={hideToast}/>
          : null
      }
    </div>
  );
}

IndexPage.propTypes = {};

function mapStateToProps({index, count}) {
  return {index, count};
}

export default connect(mapStateToProps)(IndexPage);
